<template>
  <div style="display: none;" :class="'js_upload_btn_'+opkey">
    <!-- accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" -->
    <el-upload
      Authorization
      :headers="headers"
      class="upload-demo"
      ref="upload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :action="url"
      :multiple="multiple"
      :limit="limit"
      name="image"
      :accept="accept"
      :on-change="change"
      :file-list="fileList"
      :show-file-list="false"
      :auto-upload="true">
      <el-button slot="trigger" size="medium" class="margin_t10 "  type="primary">{{form.xls_file?'修改文件':'选择文件'}}</el-button>
    </el-upload>
  </div>
</template>

<script>
  import $ from "jquery";
export default {
  name: 'import',
  data () {
    return {
      is_ajax:false,
      open:false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        xls_file: [
          { required: true, message: "请选择xlsx文件", trigger: "blur" }
        ]
      },

      fileList:[],
      type:'',  //1 客户供应商
      url:this.http+'/api/Public/upload_img',
      title:'',
      temp:'',
      headers: {
          'authorization': this.getState().token,
      },
      file_length:0,
      desc:'',
      submit_url:''
    }
  },

  props: {
    accept:{
      type:String,
      default:''
    },
    limit:{
      type:Number,
      default:1
    },
    multiple:{
      type:Boolean,
      default:false
    },
    opkey:{
      type:String,
      default:''
    }
  },
  created() {

  },
  methods:{
    init(submit_url){
      this.url=this.http+'/api/Public/upload_img'
      this.is_ajax=false;
      this.fileList=[];
      $('.js_upload_btn_'+this.opkey+' .el-upload__input').click()
    },

    handleUploadSuccess(res,file, fileList) {
      console.log(res)
      if(res.status==200){
        this.$emit("handleUploadSuccess", {message:res.message,file});
        // this.axios.post(this.submit_url, {file_id:res.data.id,id:this.form.project_id}).then((res) => {
        //     if (res) {
        //         this.tip_show('导入成功','success')
        //         this.open=false;
        //         this.$emit("handleUploadSuccess", {});
        //     } else {
        //         this.$message.error(res.message);
        //     }
        //     this.is_ajax=false;
        // }).catch((err) => {
        //     console.log(err);
        //     this.is_ajax=false;
        // });
      }else{
        this.is_ajax=false;
        this.fileList=[];
        this.tip_show(res.message,'error')
      }
    },
    handleUploadError(){
      this.is_ajax=false;
      this.fileList=[];
      this.tip_show('导入失败','error')
    },
    change(file, fileList){
      // console.log(fileList)
      // this.fileList=[fileList[fileList.length-1]];
      // this.$refs.upload.submit();
    },
  }
}
</script>

<style scoped>
  .tip_info{background: #F5F6FA; line-height: 22px; border-radius: 4px; padding: 12px 16px; color: #828696;}
  .tip_info .dark{padding-bottom: 5px;}
  .tip_info .item{padding: 5px; color: #1F2329;}
  .tip_info a{color: #004EA2;}
  .tip_info a img{margin-right: 5px;}
</style>
